<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:shiro="http://www.w3.org/1999/xhtml">

<head th:include="common/Head :: headCss">

</head>

<div>
    <link rel="stylesheet" href="../bootstrap/js/dept/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="../bootstrap/js/dept/css/jquery.treegrid.css">
    <link rel="stylesheet" href="../ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../ztree/css/metroStyle/metroStyle.css">
</div>
<div>


    <!--
     <link href="../bootstrap/js/project/sys/shop/css/datatables.min.css" rel="stylesheet">

    <link rel="stylesheet" href="../bootstrap/js/dept/css/bootstrap-table.min.css">
    -->

    <link href="../bootstrap/js/project/sys/shop/css/fileinput.min.css" rel="stylesheet">


    <link rel="stylesheet" type="text/css" href="../bootstrap/dataTable/datatables.min.css"/>


    <style type="text/css">
        .table > tbody > tr > td {
            text-align: center;
        }

        /* dataTables表头居中 */
        .table > thead:first-child > tr:first-child > th {
            text-align: center;
        }

        .p-parameter li {
            width: 30%;
            padding-left: 42px;
            float: left;
            margin-bottom: 5px;
            font: 14px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
            color: #666;
        }
    </style>
</div>
<body>
<div id="wrapper">
    <nav th:include="common/Left_Ment :: left"></nav>
    <div id="page-wrapper" class="gray-bg">
        <div th:include="common/Head :: head"></div>
        <div v-show="!showList" class="panel panel-default">
            <div class="panel-heading">{{title}}</div>
            <form class="form-horizontal" id="myForm" style="padding-bottom: 50px;">
                <input type="hidden" v-model="shop.id" name="id">
                <div class="form-group">
                    <div class="col-sm-2 control-label">商品名字</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="name"
                               id="name" v-model="shop.name" placeholder="输入商品名字"
                        />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">商品价格</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="pirce"
                               v-model="shop.pirce" placeholder="输入商品价格"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">商品数量</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="num" name="num" v-model="shop.num"
                               placeholder="输入商品数量"/>
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-2 control-label">商品分类</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" style="cursor:pointer;"
                               @click="deptTree" readonly="readonly" placeholder="" v-model="shop.cname"/>
                        <input type="hidden" v-model="shop.cid" name="cid" id="cid">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-2 control-label">商品图片</div>
                    <div class="col-sm-10">
                        <div class="form-group" id="picimg">
                            <input type="file" name="reportFile" id="reportFile" multiple class="file-loading"/>
                            <input type="hidden" class="form-control" name="detail_picture" id="detail_picture"
                                   v-model="shop.detail_picture"
                            />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">是否置顶</div>
                    <div class="col-sm-10">
                        <label class="radio-inline"><input type="radio" name="top" value="1" v-model="shop.top">
                            置顶</label>
                        <label class="radio-inline"><input type="radio" name="top" value="0" v-model="shop.top">
                            默认</label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-2 control-label">是否上架</div>
                    <div class="col-sm-10">
                        <label class="radio-inline"><input type="radio" name="status" value="1" v-model="shop.status"
                                                           checked>上架</label>
                        <label class="radio-inline"><input type="radio" name="status" value="0" v-model="shop.status">下架</label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-2 control-label">是否热卖</div>
                    <div class="col-sm-10">
                        <label class="radio-inline"><input type="radio" name="hotSale" value="1" v-model="shop.hotSale"
                                                           checked>热卖</label>
                        <label class="radio-inline"><input type="radio" name="hotSale" value="0" v-model="shop.hotSale">非热卖</label>
                    </div>
                </div>

                <!--
                <div class="form-group">
                    <div class="col-sm-2 control-label">注册时间</div>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" name="register" v-model="shop.register"/>
                    </div>
                </div>
                -->
                <div class="form-group">
                    <div class="col-sm-2 control-label">排序号</div>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" name="orderNum" v-model="shop.orderNum"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">新品排序号</div>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" name="isNewProductOrderNum"
                               v-model="shop.isNewProductOrderNum"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">suk上传</div>
                    <div class="col-sm-10">
                        <div class="form-group" id="suk">
                            <input type="file" name="sukreportFile" id="sukreportFile" multiple class="file-loading"/>
                            <input type="hidden" class="form-control" name="suk_picture" id="suk_picture"
                                   v-model="shop.detail_picture"
                            />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">suk参数设置(格式：suk名字,价格;)</div>
                    <div class="col-sm-10">
                        <textarea type="text" class="form-control"
                                  v-model="shop.sukParameter" name="sukParameter"
                                  placeholder="请用以下格式分开，如： AA:AA;BB:BB; "></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">效果预览</div>
                    <div class="col-sm-10" style="border: 1px solid #e5e6e7;">
                        <ul class="p-parameter">
                            <li v-for="item in shop.sukParameterList" v-text="item"></li>
                        </ul>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">商品介绍文字说明</div>
                    <div class="col-sm-10">
                        <textarea type="text" class="form-control"
                                  v-model="shop.shopExplain" name="shopExplain"
                                  placeholder="请用以下格式分开，如： AA:AA;BB:BB; "></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">效果预览</div>
                    <div class="col-sm-10" style="border: 1px solid #e5e6e7;">
                        <ul class="p-parameter">
                            <li v-for="item in shop.shopExplainList" v-text="item"></li>
                        </ul>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">商品介绍详情图</div>
                    <div class="col-sm-10">
                        <div class="form-group" id="introduceDetail">
                            <input type="file" name="introduceReportFile" id="introduceReportFile" multiple
                                   class="file-loading"/>
                            <input type="hidden" class="form-control" name="detail_picture"
                                   id="introduce_detail_picture"
                                   v-model="shop.detail_picture"
                            />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">规格与包装</div>
                    <div class="col-sm-10">
                        <textarea type="text" class="form-control"
                                  v-model="shop.specification" name="specification"
                                  placeholder="请用以下格式分开，如： AA:AA;BB:BB; "></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">效果预览</div>
                    <div class="col-sm-10" style="border: 1px solid #e5e6e7;">
                        <ul class="p-parameter">
                            <li v-for="specificationListItem in shop.specificationList"
                                v-text="specificationListItem"></li>
                        </ul>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label"></div>
                    <input type="button" name="submit" class="btn btn-primary" @click="save" value="确定"/>
                    &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
                </div>
            </form>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight" v-show="showList">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li><a href="#">Config option 1</a>
                                    </li>
                                    <li><a href="#">Config option 2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="table-responsive">
                                <div class="grid-btn">
                                    <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
                                    <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
                                    <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                                    <!--
                                     <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                                     <a class="btn btn-success" @click="del"><i
                                             class="fa fa-plus-square"></i>&nbsp;上架</a>
                                     <a class="btn btn-success" @click="del"><i
                                             class="fa fa-minus-square"></i>&nbsp;下架</a> -->
                                </div>
                                <table class="table table-striped table-bordered table-hover dataTables-example">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th>ID</th>
                                        <th>商品名称</th>
                                        <th>商品价格</th>
                                        <th>商品数量</th>
                                        <th>详情图</th>
                                        <th>是否置顶</th>
                                        <th>是否上架</th>
                                        <th>是否热卖</th>
                                        <th>注册时间</th>
                                        <th>排序号</th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div>
                <strong>Copyright</strong> 星记云典 Company &copy; 2014-2017
            </div>
        </div>

    </div>

    <!-- 选择部门 -->
    <div id="deptLayer" style="display: none;padding:10px;">

        <div class="wrapper">
            <div class="treeShowHideButton" onclick="search();">
                <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
                <label id="btnHide" title="隐藏搜索">︽</label>
            </div>
            <div class="treeSearchInput" id="search">
                <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
                <button class="btn" id="btn" onclick="searchNode()"> 搜索</button>
            </div>
            <div class="treeExpandCollapse">
                <a href="javascript:" id="btnExpand">展开</a> /
                <a href="javascript:" id="btnCollapse">折叠</a>
            </div>
            <div id="deptTree" class="ztree"></div>
        </div>
    </div>
</div>
<div th:include="common/Head :: js"></div>

<script src="../ztree/jquery.ztree.all.min.js"></script>
<script src="../ztree/jquery.ztree.exhide.js"></script>

<script src="../bootstrap/js/dept/js/jquery.treegrid.min.js"></script>
<script src="../bootstrap/js/dept/js/jquery.treegrid.bootstrap3.js"></script>
<script src="../bootstrap/js/dept/js/jquery.treegrid.extension.js"></script>
<script src="../bootstrap/js/dept/js/tree.table.js"></script>

<script src="../bootstrap/js/dept/js/vue.min.js"></script>


<script src="../bootstrap/js/dept/js/bootstrapValidator.js"></script>

<script src="../bootstrap/js/project/sys/shop/js/fileinput.min.js"></script>
<script src="../bootstrap/js/project/sys/shop/js/zh.js"></script>
<script src="../bootstrap/js/tool/Sortable.js"></script>
<script src="../bootstrap/js/tool/Sortable.min.js"></script>

<script>
    var vueSon = {
        methods: {},
        created() {
            //商品介绍文字说明
            this.$watch('shop.shopExplain', (val, oldVal) => {
                _this = this;
                if (val.indexOf(";") != -1) {
                    var list = val.split(";")
                    list.pop()
                    vm.shop.shopExplainList = [];
                    for (var i = 0; i < list.length; i++) {
                        vm.shop.shopExplainList.push(list[i])
                    }
                }
            })
            //规格与包装
            this.$watch('shop.specification', (val, oldVal) => {
                _this = this;
                if (val.indexOf(";") != -1) {
                    var list = val.split(";")
                    list.pop()
                    vm.shop.specificationList = [];
                    for (var i = 0; i < list.length; i++) {
                        vm.shop.specificationList.push(list[i])
                    }
                }
            })
            //suk
            this.$watch('shop.sukParameter', (val, oldVal) => {
                _this = this;
                if (val.indexOf(";") != -1) {
                    var list = val.split(";")
                    list.pop()
                    vm.shop.sukParameterList = [];
                    for (var i = 0; i < list.length; i++) {
                        vm.shop.sukParameterList.push(list[i])
                    }
                }
            })
        }
    }

</script>
<script src="../bootstrap/js/project/sys/shop/js/shopData.js"></script>


<script type="text/javascript" src="../bootstrap/dataTable/datatables.min.js"></script>
<!-- 引用树的js-->
<script src="../bootstrap/js/role/js/ztree.js"></script>


<!-- Page-Level Scripts -->
<script>
    yuheUtils.bindPersonalSetting();

    var data;

    var lastValue = "", nodeList = [], key = $("#keyword");
    key.bind("focus", focusKey).bind("blur", blurKey).bind("change cut input propertychange", searchNode);
    key.bind("keydown", function (e) {
        if (e.which == 13) {
            searchNode();
        }
    });
    $(document).ready(function () {

        //   console.log(sortable)

        $("#shopMange").attr("class", "active");
        $("#shopMange_ul").attr("class", "nav nav-second-level collapse in");

        $("#commodityManage").attr("class", "active");


        $('.dataTables-example').DataTable({
            pageLength: 10,
            responsive: true,
            //  dom: '<"html5buttons"B>f',
            dom: '<"html5buttons"B>f<"top">rt<"bottom"lp>i<"clear">',
            pagingType: "full_numbers",
            destroy: true,
            colReorder: true,
            responsive: true,
            language: {
                "sLengthMenu": "每页显示 _MENU_条",
                "paginate": {
                    "last": "最后一页",
                    "first": "第一页",
                    "next": "下一页",
                    "previous": "上一页",
                    "show": "显示"
                },
                zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
                //下面三者构成了总体的左下角的内容。
                info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。
                infoEmpty: "0条记录",//筛选为空时左下角的显示。
                infoFiltered: "",//筛选之后的左下角筛选提示，
                buttons: {
                    "colvis": "列可见性",
                    "print": "打印",
                    "copy": "复制数据",
                },
                editor: {
                    "Update": "更新",
                }

            },
            buttons: [
                {extend: 'colvis'},
                {
                    extend: 'print',
                    customize: function (win) {
                        $(win.document.body).addClass('white-bg');
                        $(win.document.body).css('font-size', '10px');

                        $(win.document.body).find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit');
                    }
                },
                {extend: 'copy'},
                {extend: 'csv'},
                {extend: 'excel', title: 'ExampleFile'},
                {extend: 'pdf', title: 'ExampleFile'}
            ],
            ajax:
                {
                    url: "/shop/list",
                    dataSrc:

                        function (json) {
                            return json;
                        }

                    ,
                    dataType: 'json',
                    type:
                        "post",
                }
            ,
            columns: [
                {data: null, orderable: false},
                {data: "id"},
                {data: "name"},
                {data: "pirce"},
                {data: "num"},
                {data: "saveFileName", width: "15%"},
                {data: "top"},
                {data: "status"},
                {data: "hotSale"},
                {data: "register"},
                {data: "orderNum"}
            ],
            aoColumnDefs:
                [
                    {
                        "render": function (data, type) {
                            return "<div align='center'><input type='radio'   name='radio' value='" + data.id + "' ></div>";
                        },
                        "aTargets": 0 //第一列
                    },
                    {
                        "render": function (data, type) {
                            if (data == 1) {
                                return ' <a class="btn btn-success" ><i class="fa fa-plus-square"></i>&nbsp;已置顶</a>';
                            } else {
                                return '  <a class="btn btn-success" ><i class="fa fa-minus-square"></i>&nbsp;未置顶</a>';
                            }
                        },
                        "aTargets": 6 //第一列
                    },
                    {
                        "render": function (data, type) {

                            if (data == 1) {

                                return '<a class="btn btn-danger" ><i class="fa fa-check"></i>&nbsp;已上架</a>';
                            } else {
                                return ' <a class="btn btn-danger" ><i class="fa fa-close"></i>&nbsp;未上架</a>';
                            }
                        },
                        "aTargets": 7 //第7列
                    },

                    {
                        "render": function (data, type) {


                            if (data != undefined && data != 'undefined') {

                                return new Date(data).Format("yyyy-MM-dd hh:mm:ss");
                            } else {
                                return '';
                            }
                        },
                        "aTargets": 9 //第7列
                    },
                    {
                        "render": function (data, type, full) {

                            if (data != undefined && data != 'undefined' && data.length > 0) {

                                return '<img src="' + full.pageaddr + "/" + data + '"  onclick ="detail(' + "'" + full.id + "'" + ')" width="40" height="40">';
                            } else {
                                return '<a class="btn btn-sm btn-warning" ><i class="fa fa-file-photo-o"></i>&nbsp;暂无图片</a>';

                            }
                        },
                        "aTargets": 5 //第5列
                    },
                    {
                        "render": function (data, type) {

                            if (data == 1) {

                                return '<a class="btn btn-warning" ><i class="fa fa-check"></i>&nbsp;已上架</a>';
                            } else {
                                return ' <a class="btn btn-warning" ><i class="fa fa-close"></i>&nbsp;未上架</a>';
                            }
                        },
                        "aTargets": 8 //第7列
                    },

                ],
            columnDefs:
                [
                    {orderable: false, targets: 0},
                    {width: "15%", orderable: false, targets: 5}
                ],
            order:
                [1, 'asc']
        })
        ;

        $('form').bootstrapValidator({

            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    message: '登录账号验证失败',
                    validators: {
                        notEmpty: {
                            message: '商品名字不能为空'
                        },
                        stringLength: {
                            min: 2,
                            message: '商品名字长度必须在2个字节以上'
                        }
                    }
                },
                pirce: {
                    message: '价格验证失败',
                    validators: {
                        notEmpty: {
                            message: '价格不能为空'
                        },
                        stringLength: {
                            min: 2,
                            message: '价格长度必须在2个字节以上'
                        },
                        regexp: {
                            regexp: /^[0-9]+$/,
                            message: '价格只能包含数字'
                        }
                    }
                }
                ,
                num: {
                    message: '数量验证失败',
                    validators: {
                        notEmpty: {
                            message: '数量不能为空'
                        },
                        stringLength: {
                            min: 2,
                            message: '数量长度必须在2个字节以上'
                        },
                        regexp: {
                            regexp: /^[0-9]+$/,
                            message: '数量只能包含数字'
                        }
                    }
                }

            }
        })


    });
    //对Date 类进行扩展
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    function detail(shopId) {
        top.layer.open({
            type: 2,
            title: '照片详情查看',
            shadeClose: true,
            shade: 0.1,
            scrollbar: true,
            area: ['80%', '80%'],
            content: '/shop/pictureCarousel?shopId=' + shopId
        })
    }

    function searchNode() {
        var value = $.trim(key.get(0).value);
        var keyType = "name";
        if (lastValue === value) {

            return;
        }
        lastValue = value;
        var nodes = ztree.getNodes();
        if (value == "") {
            showAllNode(nodes);
            return;
        }
        hideAllNode(nodes);
        nodeList = ztree.getNodesByParamFuzzy(keyType, value);

        updateNodes(nodeList);
    }

    function hideAllNode(nodes) {
        //var ztree = $.fn.zTree.getZTreeObj("deptTree");
        nodes = ztree.transformToArray(nodes);
        for (var i = nodes.length - 1; i >= 0; i--) {
            ztree.hideNode(nodes[i]);
        }
    }

    function showAllNode(nodes) {
        nodes = ztree.transformToArray(nodes);
        for (var i = nodes.length - 1; i >= 0; i--) {
            if (nodes[i].getParentNode() != null) {
                ztree.expandNode(nodes[i], false, false, false, false);
            } else {
                ztree.expandNode(nodes[i], true, true, false, false);
            }
            ztree.showNode(nodes[i]);
            showAllNode(nodes[i].children);
        }
    }

    function blurKey(e) {
        if (key.get(0).value === "") {
            key.addClass("empty");
        }
        searchNode(e);
    }

    function updateNodes(nodeList) {
        ztree.showNodes(nodeList);
        for (var i = 0, l = nodeList.length; i < l; i++) {
            var treeNode = nodeList[i];
            showChildren(treeNode);
            showParent(treeNode)
        }
    }

    function showChildren(treeNode) {
        if (treeNode.isParent) {
            for (var idx in treeNode.children) {
                var node = treeNode.children[idx];
                ztree.showNode(node);
                showChildren(node);
            }
        }
    }

    function showParent(treeNode) {
        var parentNode;
        while ((parentNode = treeNode.getParentNode()) != null) {
            ztree.showNode(parentNode);
            ztree.expandNode(parentNode, true, false, false);
            treeNode = parentNode;
        }
    }

    function search($this) {
        $('#search').slideToggle(200);
        $('#btnShow').toggle();
        $('#btnHide').toggle();
        $('#keyword').focus();
    }

    $(function () {
        $("#systemManage").attr("class", "active");
        $("#systemManage_ul").attr("class", "nav nav-second-level collapse in");

        $("#roleManage").attr("class", "active");

        $('#btnExpand').click(function () {
            ztree.expandAll(true);
        });
        $('#btnCollapse').click(function () {
            ztree.expandAll(false);
        });
        $(function () {
            var $thisA = $('a[href="/shop/index"]');
            $thisA.parent().attr("class", "active");
            $thisA.parent().parent().attr("class", "nav nav-second-level collapse in");
        });
    });


</script>

</body>

</html>
